<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
    <style>
        .palette {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>
<body>            
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>        
    </ul>

    <p class="color-picker"></p>

    <!-- <script>
        var list = document.querySelectorAll("li");
        for (var i = i = 0, len = list.length; i < len; i++) {
            list[i].onclick = function(e) {
                console.log(e);
                var t = e.target;
                var c = t.style.backgroundColor;
                var p = document.getElementsByClassName("color-picker")[0]
                p.innerHTML = c;
                p.style.color = c;

            }
        }
    </script> -->

</body>
</html>
<script>
    var ul = document.getElementsByClassName('palette')[0];
    ul.addEventListener('click',function(e){
       console.log(e.target.nodeName.toLowerCase() == "li");
       if(e.target.nodeName.toLowerCase() == "li"){
        console.log(e.target.style.backgroundColor);
        document.getElementsByClassName('color-picker')[0].innerHTML = e.target.style.backgroundColor;
        document.getElementsByClassName('color-picker')[0].style.color = e.target.style.backgroundColor;
       }
    })
</script>